<template>
  <div class="top">
    <!-- <h1>{{ obj2 }}</h1>
    <button @click="obj2 = { a: 2 }">修改</button> -->
    <div class="title">{{ item.name }}</div>
    <div class="user">{{ item.manager }}</div>
    <el-dropdown @command="commandEvent">
      <span>操作
        <i class="el-icon-arrow-down el-icon--right" />
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <!-- 增：
          1：弹框组件
          2：布局与表单验证
          3：定义新增api
          4:导入与调用
          5：调用成功：
                提示一下
                清空表单数据
                关闭弹框
                刷新父级列表数据

           -->
          <el-dropdown-item command="add">添加子部门</el-dropdown-item>
          <!-- 改：
     1：打开弹框组件
     2：回显数据
         当前行数据如果包含回显的所有字段，直接将数据赋值给弹框组件,深拷贝时
             JSON.parse(JSON.stringify(数据))
          后端传入数据这种方式基本都适用：字符串，number.数组...
             自己定义的另类数据，比如包含function，转换完后function就没有了

         当前行数据如果不包含回显的所有字段，调用接口获取详情数据并赋值弹框组件
     3：新增组件内要有一个字段用于区分新增与编辑，草稿   模板   ...
     4新增打开时将该字段改为新增的标识 ，编辑打开改为编辑的标识
     5:弹框的标题，表单验证等处理
     6：分场景调用编辑api
        a:定义编辑api
        b:导入
        c:点击确定时分场景调用
        d:调用成功
           提示
           关闭弹框
           清除表单数据
           刷新父级列表数据

      -->

          <el-dropdown-item
            v-if="!item.isTop"
            command="edit"
          >查看部门</el-dropdown-item>

          <!--
   删除：
     1：定义删除api
     2:相应页面导入
     3：弹出 一个确定，点击了确定再执行删除api调用
       调用成功
          提示
          刷新列表数据
 -->

          <el-dropdown-item
            v-if="!item.isTop"
            command="del"
          >删除部门</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>
<script>
import { companyDepartmentDelete } from '@/api/departments'
export default {
  props: {
    // 当前点击项的所有数据
    item: {
      type: Object,
      default: () => ({}),
      required: true
    },
    obj2: {
      type: Object,
      default: () => ({})
    }
  },
  methods: {
    async commandEvent(command) {
      switch (command) {
        case 'add':
          // 新增
          this.$bus.$emit('openAdd', true, this.item, 'add')
          break
        case 'del':
          // 删除
          await this.$confirm('您确定删除该部门吗?', '提示')
          await companyDepartmentDelete(this.item.id)
          this.$message.success('删除成功')
          // 刷新父级列表数据
          this.$emit('getData')
          // this.$parent.getData()
          break
        case 'edit':
          // 编辑
          this.$bus.$emit('openAdd', true, this.item, 'edit')
          break
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.top {
  display: flex;
  .title {
    flex: 1;
  }
  .user {
    width: 120px;
    margin-right: 20px;
    text-align: right;
  }
}
</style>
